<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下-你就知道</title>
</head>

<style>

    /*头部区域*/
    header>span:first-child{
        position: absolute;
        top: 8px;
        left: 8px;
    }

    header>span:last-child{
        position: absolute;
        top: 8px;
        right: 8px;
    }

    /*搜索区域*/
    .center{
        width: 500px;
        height: 300px;
        background: tomato;
        position: relative;
        top: 100px;
        left: calc(50% - 250px);
    }

    .list>div:first-child{
        position: absolute;
        top: 50px;
        left: 0px;
        width: 250px;
        background: beige;
    }

    .list>div:last-child{
        position: absolute;
        top:50px;
        left: 250px;
        width: 250px;
        background: cyan;
    }


    /*底部区域*/
    footer{
        position: absolute;
        bottom: 0px;
        background: #a0a0a0;
    }

    /*侧边栏*/
    aside{
        width: 30px;
        height: 100px;
        position: absolute;
        right: 0px;
        bottom: 90px;

    }

    /*遮罩层*/
    .mask{
        position: absolute;
        background: #a0a0a0;
        opacity: 0.5;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }

    /*登录界面*/
    .login{
        width: 600px;
        height: 300px;
        position: absolute;
        background: white;
        left: calc(50% - 300px);
        top: calc(50% - 150px);
    }

</style>


<body>

<div id="content">
    <header>
        <span><a href="">新闻</a> hao123 地图 贴吧 视频 图片 网盘 文库 更多</span>
        <span>设置 登录</span>
    </header>

    <div class="center">
        <form action="">
            <input type="search" name="search" id="">
            <input type="submit" value="百度一下">
        </form>
        <div class="list">
            <div class="list_left">左边列表</div>
            <div class="right_left">右边列表</div>
        </div>
    </div>

    <aside>侧边栏</aside>

    <footer>
        关于百度About Baidu使用百度前必读帮助中心企业推广京公网安备11000002000001号京ICP证030173号互联网新闻信息服务许可证11220180008网络文化经营许可证： 京网文〔2023〕1034-029号信息网络传播视听节目许可证 0110516
    </footer>
</div>


<!--遮罩层-->
<div class="mask"></div>
<div class="login">
    <form action="">
        登录
    </form>
</div>



</body>
</html>